<template>
      <transition   name="el-zoom-in-center">
  <div v-show="show" class="LoginBox" >

     
 
            
    <el-main class="main">
      <div class="LoginIputBox">
        <h1 class="logintitle">欢迎您登陆</h1>
        <div class="logo">
          <img src="../assets/logo.png" alt />
        </div>
        <el-input class="Username" v-model="Username"   :placeholder="Usernameplaceholder"  clearable  @input="namechange"></el-input>
        <el-input class="Password" v-model="inputPassword" placeholder="请输入密码"  show-password></el-input>
        <!-- success  成功按钮 -->
        <el-button @click="rutento()" class="subit font-style" type="primary">主要按钮</el-button>
        <a  class="InputFunction">
          忘记密码？ 
        </a>
     
      </div>
    </el-main>
          
        

  </div>
    </transition>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      height: "",
      show3: false,
      Username: "",
      input:'',
      inputPassword: "",
      show:true,
      text:'aa',
      Usernameplaceholder:'请输入账号',
      timer :''//定时器
    };
  },
  beforeCreate:function(){
          
  },
  created: function() {
 
   
  },
  //     watch :{
  //   height:{
  //     //变化后的值：newVal
  //     //变化前的值: oldVal
  //     handler(newVal,oldVal){

  //     },
  //     deep:true
  //   }
  // }

  methods: {
    namechange(){
      var reg = /^[\u0391-\uFFE5A-Za-z]+$/
      if(reg.test(this.Username)){
          // eslint-disable-next-line no-console
          console.log(this.Username)
      } else {
       this.Username =''
       this.Usernameplaceholder="请输入合法的账号"
        this.MessageFun('warning','请输入合法的账号',true)
      } 
    },

    rutento(){
      
      if(!this.Username,!this.inputPassword){

             this.MessageFun('error','账号或密码为空',true)
      } else if ( this.$store.state.username==this.Username && this.$store.state.passwrod==this.inputPassword){
        let thiss = this
             thiss.MessageFun('success','登录成功',true)
         thiss.show =false
          localStorage.setItem("login", JSON.stringify(true));
        thiss.timer =  setInterval(()=>{
          
           thiss.$router.push('/Home')
           
    
        },1000)  
           
      }else{
         this.MessageFun('error','账号或密码错误！！！',true)
      }

     
    }
    
  },
  beforeDestroy:function(){
    clearInterval( this.timer)
    // eslint-disable-next-line no-console
    // console.log('beforeDestroy')

  }
};
</script>
<style  lang="scss" >
* {
  margin: 0;
  padding: 0;
}
.LoginBox {
  width: 100%;
  height: 100%;
  display: flex;
  // flex-direction: column;
  background-color: #2c3e50;
  flex-wrap: nowrap;
  justify-content: center;


}
.LoginIputBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

}
.logintitle {
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: aliceblue;
  margin-top: 10%;
  letter-spacing: 10px;
}
.Password,.Username {
  width: 50%;
  margin: 10px 0px;
  
}
.subit {
  width: 50%;
}
.InputFunction {
  width: 47%;
  height: 20px;
  display: block;
  color: #ffffff;
  text-decoration: none;
  text-align:center;
  margin-left: 47%;
  margin-top: 10px;
  letter-spacing: 10px;
}
</style>
